<template>
    <div class="store-loaction">
        <c-title text="标注店铺定位"></c-title>
        <div class="main">

            <div class="head" v-if="id && !is_show_status">
                <div class="flex">
                    <template v-for="(item, i) in status_array">
                        <div>
                            <div class="head-top"><i
                                    :class="item.code == 1 ? 'iconfont icon-icon_select1' : 'iconfont icon-icon_close'"></i><span
                                    class="status-name">{{ item.title }}</span></div>
                            <div class="time">{{ item.date }}</div>
                        </div>
                        <div class="line" v-if="i + 1 < status_array.length"></div>
                    </template>
                </div>
                <div class="reason" v-if="msg">
                    <div class="reason-txt">{{ msg }}</div>
                    <div class="reason-btn" @click="edit" v-if="edit_button">修改资料</div>
                </div>
            </div>

            <van-cell-group>
                <van-field v-model="store_name" required label="门店名称" placeholder="请填写店铺名称" :readonly="readonly" />
                <van-field v-model="operate_address" required clearable label="经营地址" placeholder="请填写经营地址"
                    :readonly="readonly" />
                <van-field v-model="location_txt" required clearable label="门店经纬度" placeholder="请选择门店经纬度" readonly>
                    <template #button>
                        <div @click="toGeolocation()"><span class="iconfont icon-dingwei" style="color:red;"></span>{{
                            location_txt ? '切换' :
                                '自动定位' }}</div>
                    </template>
                </van-field>
                <van-field v-model="store_address" required clearable label="门店位置" placeholder="请填写门店详细位置"
                    :readonly="readonly" />
                <van-field v-model="address_mark" required clearable label="地址说明" placeholder="请填写地址说明"
                    :readonly="readonly" />
                <van-field v-model="businessHours" @click="show_hours" required clearable label="营业时间"
                    :readonly="readonly" placeholder="例如：周一至周五 09:00-23:00" />
                <van-field v-model="mobile" required clearable label="联系人手机号" placeholder="请填写手机号"
                    :readonly="readonly" />
                <van-field v-model="remark" clearable label="备注" placeholder="请填写备注" :readonly="readonly" />
                <van-field v-model="fixed_line" clearable label="400电话" placeholder="请填写以400开头电话号"
                    :readonly="readonly" />
            </van-cell-group>
            <div class="photo-box">

                <van-cell-group>
                    <van-field required label="门头照片">
                        <template #input>
                            <van-uploader v-model="fileList1" :after-read="((e) => afterRead(e, 'storefront_imgs'))"
                                :deletable="!readonly" :before-delete="beforeDelete" :show-upload="!readonly">
                                <div class="upload-css" v-if="!readonly"><van-icon name="plus" /></div>
                            </van-uploader>
                        </template>
                    </van-field>
                    <van-field required label="店内环境照片">
                        <template #input>
                            <van-uploader v-model="fileList2" :after-read="((e) => afterRead(e, 'in_store_imgs'))"
                                :deletable="!readonly" :before-delete="beforeDelete_2" :show-upload="!readonly">
                                <div class="upload-css" v-if="!readonly"><van-icon name="plus" /></div>
                            </van-uploader>
                        </template>
                    </van-field>
                    <van-field required label="附近商户照片">
                        <template #input>
                            <van-uploader v-model="fileList3" :after-read="((e) => afterRead(e, 'nearby_imgs'))"
                                :deletable="!readonly" :before-delete="beforeDelete_3" :show-upload="!readonly">
                                <div class="upload-css" v-if="!readonly"><van-icon name="plus" /></div>
                            </van-uploader>
                        </template>
                    </van-field>
                </van-cell-group>
            </div>
        </div>
        <div class="submit" :class="{'w375': fun.isPc()}" v-if="!id || is_show_status">
            <div @click="submit">提交资料</div>
        </div>



        <van-popup v-model="hoursShow" @close="hoursShow = false" round position="bottom">
            <div class="distance-main">
                <div class="distance-head flex-a-c flex-j-sb">
                    <div class="cancel" @click="hoursShow = false">取消</div>
                    <div class="title">营业时间</div>
                    <div class="affirm" @click="onAffirm">确认</div>
                </div>
                <div class="week-content flex">
                    <div class="week-list">
                        <div class="week-title">营业日</div>
                        <div class="flex-j-sb">
                            <block v-for="(item, index) in workWeek" :key="index">
                                <div class="week-item" :class="item.checked ? 'weekOn' : ''" @click="workWeekOn(index)">
                                    {{ item.title }}</div>
                            </block>
                        </div>
                    </div>
                    <div class="week-time">
                        <div class="time-title">营业时间</div>
                        <div class="time-head flex-a-c ">
                            <div class="start-w flex-j-c">
                                <div class="start-time flex-j-c flex-a-c" :class="timeState === 1 ? 'time-on' : ''"
                                    @click="chooseTimeOn(1)">{{ startTime }}</div>
                            </div>
                            <div class="until">至</div>
                            <div class="start-w flex-j-c">
                                <div class="end-time flex-j-c flex-a-c" :class="timeState === 2 ? 'time-on' : ''"
                                    @click="chooseTimeOn(2)">{{ endTime }}</div>
                            </div>
                        </div>
                        <div class="picker-time">
                            <van-datetime-picker v-model="currentTime" type="time" title="选择时间" :min-hour="0"
                                :max-hour="23" :show-toolbar="false" @change="bindChangeTime" />
                        </div>
                    </div>
                </div>
            </div>
        </van-popup>
    </div>
</template>

<script>
export default {
    data() {
        return {
            location_txt: '',
            id: "",
            status_array: [],
            edit_button: false,
            fileList1: [],
            fileList2: [],
            fileList3: [],
            location: "",
            store_name: "",
            operate_address: "",
            store_address: "",
            storefront_imgs: [],
            nearby_imgs: [],
            in_store_imgs: [],

            address_mark: "",
            mobile: "",
            fixed_line: "",
            addressInfo: "",
            remark: "",

            hoursShow: false,
            workWeek: [
                //显示选中的日期数组
                {
                    title: "周一",
                    value: "1",
                    checked: false
                },
                {
                    title: "周二",
                    value: "2",
                    checked: false
                },
                {
                    title: "周三",
                    value: "3",
                    checked: false
                },
                {
                    title: "周四",
                    value: "4",
                    checked: false
                },
                {
                    title: "周五",
                    value: "5",
                    checked: false
                },
                {
                    title: "周六",
                    value: "6",
                    checked: false
                },
                {
                    title: "周日",
                    value: "7",
                    checked: false
                }
            ],
            form: {
                work_week: "",
                work_start_time: "",
                work_end_time: "",

            },
            is_show_status: false,
            currentTime: "0:00",
            startTime: "0:00",
            endTime: "0:00",
            point: {},
            businessHours: "",
            msg: "",
            id: '',
            readonly: false,
            timeState: 1, //判断是选择开始时间还是结束时间
        };
    },
    activated() {
        this.hoursShow = false;
        this.id = this.$route.query.id || localStorage.getItem('map_marker_id') || '';
        this.fun.setWXTitle('标注店铺定位')
        if (this.id) {
            this.readonly = true;
            this.getDetail()
        } else {
            if (localStorage.getItem('myLocation')) {
                let myLocation = JSON.parse(localStorage.getItem('myLocation'))
                this.point = myLocation.point;
                this.location_txt = `经度${myLocation.point.lng},纬度${myLocation.point.lat}`;
                return;
            }
            this.fun
                .getLocation()
                .then(res => {
                    this.point = res.point;
                    this.location_txt = `经度${res.point.split(',')[0]},纬度${res.point.split(',')[1]}`;
                })
                .catch(err => {
                    console.log(err);
                });
        }
    },
    deactivated() {
        if (localStorage.getItem('map_marker_id')) {
            localStorage.removeItem('map_marker_id');
        }
    },
    methods: {
        beforeDelete(file, detail) {
            this.fileList1 = this.fileList1.filter((item,index)=>index!==detail.index);
            this.storefront_imgs = this.storefront_imgs.filter((item,index)=>index!==detail.index);
            return true;
        },
        beforeDelete_2(file, detail) {
            this.in_store_imgs = this.in_store_imgs.filter((item,index)=>index!==detail.index);;
            this.fileList2 = this.fileList2.filter((item,index)=>index!==detail.index);
            return true;
        },
        beforeDelete_3(file, detail) {
            this.nearby_imgs = this.nearby_imgs.filter((item,index)=>index!==detail.index);
            this.fileList3 = this.fileList3.filter((item,index)=>index!==detail.index);
            return true;
        },
        edit() {
            this.is_show_status = true;
            this.readonly = false;
        },
        toGeolocation() {
            if (this.readonly) {
                return;
            }
            this.$store.commit('setReferer', window.location.href);
            this.$router.push(this.fun.getUrl("o2oLocation_loc"));
        },

        getDetail() {
            this.fileList1 = [];
            this.fileList2 = [];
            this.fileList3 = [];
            $http.post("plugin.map-marker.frontend.controllers.marker.list.details", { id: this.id }, '').then(({ result, msg, data }) => {
                if (result) {
                    this.edit_button = data.edit_button;
                    this.businessHours = data.businessHours;
                    this.status_array = data.status_array;
                    this.store_name = data.store_name;
                    this.operate_address = data.operate_address;
                    this.store_address = data.store_address;
                    this.address_mark = data.address_mark;
                    this.businessHours = data.operate_time
                    this.mobile = data.mobile;
                    this.location_txt = `经度${data.location.split(',')[0]},纬度${data.location.split(',')[1]}`,
                        this.point = { lng: data.location.split(',')[0], lat: data.location.split(',')[1] };
                    this.fixed_line = data.fixed_line;
                    this.remark = data.remark;
                    this.storefront_imgs = data.storefront_imgs;
                    this.in_store_imgs = data.in_store_imgs;
                    this.nearby_imgs = data.nearby_imgs;
                    data.storefront_imgs.forEach(item => {
                        this.fileList1.push({ url: item })
                    })
                    data.in_store_imgs.forEach(item => {
                        this.fileList2.push({ url: item })
                    })
                    data.nearby_imgs.forEach(item => {
                        this.fileList3.push({ url: item })
                    })
                    let _res = data.status_array.filter(item => item.code == 0);
                    if (_res && _res.length !== 0) {
                        this.readonly = true;
                        this.msg = _res[0].msg;
                    }
                    if (data.status_array && data.status_array.length == 1 && data.status_array[0].code == 1) {
                        this.readonly = true;
                    }
                } else {
                    this.$toast(msg);
                }
            })
        },
        bindChangeTime(event) {
            const val = event.$parent.innerValue;
            if (this.timeState === 1) {
                this.startTime = val;
            }
            if (this.timeState === 2) {
                this.endTime = val;
            }
        },
        workWeekOn(index) {
            this.workWeek[index].checked = !this.workWeek[index].checked; //修改选中的星期几
        },
        chooseTimeOn(state) {
            //切换开始和结束时间
            this.currentTime = "0:00";
            this.timeState = Number(state);
        },
        show_hours() {
            if (this.readonly) {
                return;
            }
            this.hoursShow = true;
        },
        submit() {

            console.log(this.in_store_imgs,'in_store_imgs===');
            let json = {
                form: {
                    store_name: this.store_name,
                    location: `${this.point.lng},${this.point.lat}`,
                    storefront_imgs: this.storefront_imgs,
                    in_store_imgs: this.in_store_imgs,
                    nearby_imgs: this.nearby_imgs,
                    remark: this.remark,
                    fixed_line: this.fixed_line,
                    mobile: this.mobile,
                    operate_time: this.businessHours,
                    address_mark: this.address_mark,
                    store_address: this.store_address,
                    operate_address: this.operate_address
                }
            };
            let url = "plugin.map-marker.frontend.controllers.apply.index";
            if (this.id) {
                url = 'plugin.map-marker.frontend.controllers.apply.index.edit'
                json.id = this.id;
            }
            $http.post(url, json, '').then(({ result, msg, data }) => {
                this.$toast(msg);
                if (data.id) {
                    localStorage.setItem("map_marker_id", data.id);
                }
                if (result) {
                    this.id = data.id;
                    this.is_show_status = false;
                    this.getDetail()
                } else {
                    if (data.push_error) {
                        this.id = data.id;
                        this.is_show_status = false;
                        this.getDetail()
                    }
                }
            })
        },
        onAffirm() {
            let workWeek = this.workWeek,
                startDate = "",
                endDate = "",
                workData = [],
                workIdData = [];
            workData = workWeek.filter(item => {
                //筛选所有选中的日期
                return item.checked === true ? item.value : false;
            });
            if (workData.length > 0) {
                let startDay = this.startTime.split(":");
                let endDay = this.endTime.split(":");
                if (Number(startDay[0]) < Number(endDay[0])) {
                    //记得加选择日期
                    workData.forEach(item => {
                        workIdData.push(item.value);
                    });
                    startDate = workData[0].title;
                    endDate = workData[workData.length - 1].title;
                    console.log(workIdData, 'workIdData===');
                    this.form.work_week = workIdData;
                    this.form.work_start_time = this.startTime;
                    this.form.work_end_time = this.endTime;
                    this.businessHours = `${startDate}至${endDate} ${this.startTime}-${this.endTime}`;
                    this.hoursShow = false;
                } else {
                    this.$toast("结束时间不能大于开始时间")
                }
            } else {
                this.$toast("请选择店铺营业日期")
            }
        },
        afterRead(e, type) {
            this.$toast.loading({
                duration: 0, // 持续展示 toast
                forbidClick: true,
                message: "正在上传中...",
            });
            let fd = new FormData()
            fd.append("file", e.file);
            let uploadUrl = this.fun.getRealUrl("upload.uploadPic", {});
            axios
                .post(uploadUrl, fd, {
                    headers: { "Content-Type": "multipart/form-data" }
                })
                .then(response => {
                    this.$toast.clear();
                    var responseData = response.data;
                    if (responseData.result === 1) {
                        this[type].push(responseData.data.img_url);
                    }
                    this.$toast(responseData.msg)
                    console.log(this.fileList1, 'f====ff');
                    console.log(this[type], 'type===f====ff');
                })
                .catch(error => {
                    this.$toast.clear();
                    console.log(error);
                });
        },
    }
};
</script>

<style scoped lang='scss'>
.w375{
  width: 375px;
  position: fixed;
  left: 50% !important;
  transform: translateX(-50%) !important;
}
::v-deep .van-uploader__input-wrapper {
    width: unset;
    margin: 0;
}

::v-deep .van-uploader__preview-image {

    width: 6.5625rem;
    height: 6.5625rem;
}

.distance-head {
    padding: 1.3125rem 0.8438rem 0 0.8125rem;

    .cancel {
        font-size: 0.75rem;
        color: #aaaab3;
    }

    .affirm {
        font-size: 0.75rem;
        color: #3b3b4a;
    }
}

.distance-main {
    background-color: #fff;

    .title {
        font-size: 1rem;
        font-weight: 600;
        color: #3b3b4a;
    }

    .distance-content {
        flex-wrap: wrap;
        margin-top: 0.6719rem;
        background-color: #fafafa;

        .stair-bg {
            background-color: #fff;
        }

        .stair {
            div {
                width: 7.8125rem;
                height: 2.5rem;
                line-height: 2.5rem;
                padding-left: 0.9375rem;
                font-size: 0.875rem;
                color: #3b3b4a;
                box-sizing: border-box;
                text-align: left;
            }

            .on {
                background: rgba(255, 58, 0, 0.1);
                color: #ff3a00;
            }
        }
    }
}

.week-content {
    padding: 0.9375rem 0.8125rem 0 0.8438rem;
    flex-direction: column;

    .week-list {
        color: #3b3b4a;
        font-size: 0.875rem;
        width: 100%;

        .weekOn {
            color: #fa2a0f;
        }
    }

    .week-title {
        margin-bottom: 1.25rem;
        text-align: left;
    }

    .week-item {
        font-size: 1rem;
        font-weight: bold;
        color: #333;

        .on {
            color: #fa2a0f;
        }
    }

    .week-time {
        margin: 1.875rem 0 0 0;

        .time-head {
            margin-bottom: 1.25rem;
            display: flex;
            position: relative;

            .start-w {
                flex: 0 0 50%;

                .start-time,
                .end-time {
                    font-size: 1.125rem;
                    color: rgba(21, 20, 20, 0.5);
                }

                .time-on {
                    width: 4.375rem;
                    height: 1.75rem;
                    line-height: 1.75rem;
                    background: linear-gradient(90deg, #ff693e 0%, #ff3c03 100%);
                    border-radius: 0.1875rem;
                    color: #fff;
                }
            }

            .until {
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                font-size: 0.4688rem;
                color: #151414;
            }
        }

        .time-title {
            text-align: left;
            font-size: 0.875rem;
            color: #3b3b4a;
            margin-bottom: 0.9375rem;
        }
    }
}

.icon-icon_select1,
.icon-icon_close {
    width: 1.25rem;
    height: 1.25rem;
    background-color: #23B43B;
    border-radius: 50%;
    margin-right: 0.3125rem;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: bold;
}

.reason-txt {
    font-weight: 500;
    color: #00001C;
    font-size: 0.8125rem;

}

.reason-btn {
    width: 6.5938rem;
    height: 2rem;
    margin-top: .875rem;
    line-height: 2rem;
    background: #F15353;
    text-align: center;
    color: #fff;
    border-radius: 1rem;
    font-weight: 500;
    font-size: 0.8125rem;
}

.reason {
    width: 20.6875rem;
    height: 5.5625rem;
    background: #F5F5F5;
    border-radius: 0.5rem;
    margin-top: .75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.icon-icon_close {
    font-size: 0.65rem;
    font-weight: 800;
    background-color: #F15353 !important;
}

.flex {
    display: flex;

}

.line {
    width: 6.4375rem;
    border-top: 0.0938rem solid #D6D6DC;
    margin-right: 1.1563rem;
    margin-top: .7188rem;
}

.time {
    font-weight: 400;
    font-size: 0.6875rem;
    color: #999999;
    text-align: left;
    margin-top: .4063rem;
    text-wrap: nowrap;
    line-height: 1;
}

.head-top {
    display: flex;
    align-items: center;
}

.head {
    margin-bottom: .625rem;
    background-color: #fff;
    overflow: hidden;
    border-radius: 0.5rem;
    padding: .625rem;
    box-sizing: border-box;
}

.status-name {
    font-weight: 500;
    font-size: 0.875rem;
    color: #00001C;
}

.main {
    margin: .625rem .75rem;
    overflow: hidden;
    border-radius: 0.5rem;

    .photo-box {
        margin-top: 0.625rem;
    }

    padding-bottom: 5rem;


}

.upload-css {
    position: relative;
    width: 6.5625rem;
    height: 6.5625rem;
    background: #F8F8F8;
    border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #D6D6DC;
}

.submit {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3.75rem;
    background: #FFFFFF;
    box-shadow: 0px -1px 10px 1px #F5F5F5;
    padding: 0.625rem 0.75rem;
    box-sizing: border-box;

    div {

        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--themeBaseColor);
        background-color: #F15353;
        height: 100%;
        border-radius: 1.2813rem;
        color: #fff;
        font-weight: 500;
        font-size: 0.9375rem;
    }
}

::v-deep .van-field__body input::-webkit-input-placeholder {
    font-size: 0.875rem !important;
    color: #AAAAB3 !important;
}

::v-deep .van-field__label {
    font-weight: 500;
    font-size: 0.875rem;
    color: #00001C;
}

::v-deep .van-cell {
    min-height: 3.25rem;
    display: flex;
    align-items: center;
    line-height: unset;
}

/** **/
</style>